<template>
	<view class="dingdanjindu">
		<view class="top bac flex_ac">
			<view class="" v-if="data.images&&data.images[0]">
				<image class="goodsimg" :src="$wanlshop.oss(data.images[0])" mode="">
				</image>
			</view>
			<view class="ml24 flex1 overflow_1">
				<view class="flex">
					<u-icon v-if='data.level== 3' name="https://img.aibbyp.com/wechatUser/jiazhuang.png"
						size="60"></u-icon>
					<u-icon v-if='data.level== 2' name="https://img.aibbyp.com/wechatUser/gongzhuang.png"
						size="60"></u-icon>
					<view class="f32 fb ml12 flex1 overflow_1">
						{{data.title}}
					</view>
				</view>
				<view class="flex overflow_1 mt12">
					<u-icon name="map" color="#FD5241" size="28"></u-icon>
					<view class="ml12 flex1 overflow_1">
						{{data.address}}
					</view>
				</view>
			</view>
			<view class="ml24">
				<view class="ckdd" @click="$wanlshop.to('/pages/craftsman/details?me=true&id=' + data.id)">
					查看订单
				</view>

			</view>
		</view>
		<image class="mt24" @click="$wanlshop.to('/pages/homeRecommend/classify/category')"
			style="width: 100%;height: 72rpx;" src="https://img.aibbyp.com/wechatUser/qcg.png" mode=""></image>
		<view class="center bac mt24">
			<view class="fb f32 flex_sb">
				<view class="">
					订单进度
				</view>
				<view class="">
					<u-button type="primary" plain size="mini" @click="getOrderProgress">刷新状态</u-button>
				</view>
			</view>
			<view class="mt24">
				<!--    "status": 1, //订单进度状态:1=待平台上传合同,2=收首款,
						3=上传现场凭证,4=收中期款,5=上传现场凭证,6=待验收尾款,101=待签字,
						102=上传现场凭证,103=待验收结款 
				-->
				<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(item,key) in list" :key="key">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="checkmark-circle-fill" :color="item.complete === 0? '#999':'#3583F0 '"
									size="40"></u-icon>

							</view>
						</template>
						<template v-slot:content>
							<view class="f24">
								<view>
									<view class="f32 fb" v-if="item.status === 1">待平台上传合同</view>
									<view class="f32  flex_ac" v-if="item.status === 2">
										<view class="flex1 fb">
											收首款
										</view>
										<view v-if="item.complete === 1"
											@click="$wanlshop.to('/pages/homeRecommend/classify/category')">
											<image style="width: 60rpx;height: 44rpx;"
												src="https://img.aibbyp.com/wechatUser/sz.gif" mode=""></image>
											<view class="f24 primary ml12">
												缺辅材，去采购
											</view>
										</view>

									</view>
									<view class="f32 fb" v-if="item.status === 3">上传中期现场凭证</view>
									<view class="f32  flex_ac" v-if="item.status === 4">
										<view class="flex1 fb">
											收中期款
										</view>
										<view v-if="item.complete === 1"
											@click="$wanlshop.to('/pages/homeRecommend/classify/category')">
											<image style="width: 60rpx;height: 44rpx;"
												src="https://img.aibbyp.com/wechatUser/sz.gif" mode=""></image>
											<view class="f24 primary ml12">
												缺辅材，去采购
											</view>
										</view>

									</view>
									<view class="f32 fb" v-if="item.status === 5">上传收尾现场凭证</view>
									<view class="f32 fb" v-if="item.status === 6">待验收尾款</view>
									<view class="f32 fb " v-if="item.status === 101">
										待签字

									</view>
									<view class="f32 flex" v-if="item.status === 102">
										<view class="flex1 fb">
											上传现场凭证
										</view>
										<view class="flex_ac"
											@click="$wanlshop.to('/pages/homeRecommend/classify/category')">
											<image style="width: 60rpx;height: 44rpx;"
												src="https://img.aibbyp.com/wechatUser/sz.gif" mode=""></image>

											<view class="f24 primary ml12">
												缺辅材，去采购
											</view>
										</view>
									</view>
									<view class="f32 fb" v-if="item.status === 103">待验收结款</view>
								</view>
								<view class="info f24 mt12" v-if="item.complete_time_text">{{item.complete_time_text}}
								</view>
								<!-- 待签字 -->
								<block v-if="item.status == 101">
									<block v-if="item.complete === 0 ">
										<view class="flex_ac">
											<text class="primary" @click="showSignature = true">点击签字</text>
											<image class="imgqm" :src="$wanlshop.oss(signaUrl)" mode=""></image>
										</view>
										<view class="" v-if="item.content">
											<text class="primary" @click="chakanhetong">点击查看合同</text>
										</view>
										<recommendingCommodities v-if="WorkerGoodsData.length > 0" class="mt20"
											:data='WorkerGoodsData'></recommendingCommodities>

									</block>
									<block class="" v-if="item.complete === 1 && item.content">
										<view class="flex_ac">
											<text class="primary">
												已签字
											</text>
											<image class="imgqm" :src="$wanlshop.oss(item.content)" mode=""></image>
										</view>
										<text class="primary" @click="chakanhetong">点击查看合同</text>
									</block>

								</block>
								<!-- 上传现场凭证 -->
								<block v-if="item.status == 102">
									<block v-if="item.complete === 0">
										<view>
											<view class="f24 mt12">
												请上传现场凭证，待验收后，可结款。上传后无法修改，请认真选择上传内容。
											</view>
											<view class="info f24 mt12">
												1、(请上传现场图片，最多6张)
											</view>
											<block v-if='list[0].complete == 1'>
												<view class="up-page mt20">
													<!--图片-->
													<view class="show-box" v-for="(data,index) in item.imageList"
														:key="index">
														<image class="full" :src="$wanlshop.oss(data)"
															@tap="previewImage(index)" mode="widthFix">
														</image>
														<view class="delect-icon" @click="delect(index)">
															<image class="full"
																src="https://img.aibbyp.com/wechat/images/nHome/close.png"
																mode="">
															</image>
														</view>
													</view>
													<view v-if="item.imageList.length !== 6"
														@tap.stop="chooseVideoImage('img',key)" class="mb16 box-mode">
														<image class="full"
															src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png"
															mode=""></image>
													</view>

												</view>

												<view class="info f24">
													2、(请上传现场视频)
												</view>
												<view class="up-page mt20">

													<!--视频-->
													<view class="show-box videoMp4"
														:class="{'videoMp4HM':userInfo.systemType == '鸿蒙'}"
														v-if="item.videoList">
														<video class="full"
															:src="$wanlshop.oss(item.videoList)"></video>
														<view class="delect-icon" @tap="item.videoList = ''">
															<image class="full"
																src="https://img.aibbyp.com/wechat/images/nHome/close.png"
																mode="">
															</image>
														</view>
													</view>
													<view v-if="!item.videoList"
														@tap.stop="chooseVideoImage('video',key)" class="mb16 box-mode">
														<image class="full"
															src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png"
															mode=""></image>
													</view>
												</view>
												<view class="tar mt20">
													<u-button @click="upload(item)" size="medium" type="error"
														shape='circle'>确定上传</u-button>
												</view>
											</block>

										</view>
									</block>
									<block v-if="item.complete === 1">
										<view>
											<view class="f32 fb">已上传（不可更改）</view>

											<view class="info f24 mt12">
												现场图片
											</view>
											<view class="up-page mt20">
												<!--图片-->
												<view class="show-box" v-for="(data,index) in item.imageList"
													:key="index">
													<image class="full" :src="$wanlshop.oss(data)"
														@tap="previewImage(item.imageList,index)" mode="widthFix">
													</image>
												</view>
											</view>

											<view class="info f24" v-if="item.videoList">
												视频
											</view>
											<view class="up-page mt20">
												<!--视频-->
												<view class="show-box videoMp4"
													:class="{'videoMp4HM':userInfo.systemType == '鸿蒙'}"
													v-if="item.videoList">
													<video class="full" :src="$wanlshop.oss(item.videoList)"></video>
												</view>
											</view>
										</view>

									</block>
								</block><!-- 待验收结款 -->
								<!-- 收尾期 -->
								<block v-if="item.status == 103">
									<block v-if="item.complete === 0">
										<view class="mt12">
											等待收尾期入账
										</view>
										<view class="tar mt20" v-if="data.company_id == user.id">
											<u-button @click="ysjwk(item)" size="medium" type="error"
												shape='circle'>验收并结尾款</u-button>
										</view>
									</block>

									<block v-if="item.complete === 1">
										<view class="fb mt12">
											已收入尾期款： <text class="cf64">￥{{item.content}}</text> ，可在钱包中查看
										</view>
									</block>
								</block>

								<!-- 待平台上传合同 -->
								<block v-if="item.status == 1">
									<block v-if="item.complete === 0">
										<view class="mt12">
											<text class="">待上传合同</text>
										</view>
									</block>
									<block v-if="item.complete === 1 && item.content">
										<view class="mt12 mb24">
											<text class="primary" @click="chakanhetong(item)">点击查看合同</text>
										</view>
									</block>
									<recommendingCommodities v-if="WorkerGoodsData.length>0" class="mt20"
										:data='WorkerGoodsData'></recommendingCommodities>
								</block>
								<!-- 收首款 -->
								<block v-if="item.status == 2">
									<block v-if="item.complete === 0">
										<view class="mt12">
											等待首款入账
										</view>
									</block>
									<block v-if="item.complete === 1">
										<view class="fb mt12">
											已收入首款 <text class="cf64">￥{{item.content}}</text> ，可在钱包中查看
										</view>
									</block>
								</block>
								<!-- 上传现场凭证 -->
								<block v-if="item.status == 3">
									<block v-if="item.complete === 0">
										<view>
											<view class="f24 mt12">
												请上传现场凭证，待验收后，可结款。上传后无法修改，请认真选择上传内容。
											</view>
											<view class="info f24 mt12">
												1、(请上传现场图片，最多6张)
											</view>
											<block v-if='list[1].complete == 1'>
												<view class="up-page mt20">
													<!--图片-->
													<view class="show-box" v-for="(data,index) in item.imageList"
														:key="index">
														<image class="full" :src="$wanlshop.oss(data)"
															@tap="previewImage(index)" mode="widthFix">
														</image>
														<view class="delect-icon" @click="delect(index)">
															<image class="full"
																src="https://img.aibbyp.com/wechat/images/nHome/close.png"
																mode="">
															</image>
														</view>
													</view>
													<view v-if="item.imageList.length !== 6"
														@tap.stop="chooseVideoImage('img',key)" class="mb16 box-mode">
														<image class="full"
															src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png"
															mode=""></image>
													</view>

												</view>

												<view class="info f24">
													2、(请上传现场视频)
												</view>
												<view class="up-page mt20">

													<!--视频-->
													<view class="show-box videoMp4"
														:class="{'videoMp4HM':userInfo.systemType == '鸿蒙'}"
														v-if="item.videoList">
														<video class="full"
															:src="$wanlshop.oss(item.videoList)"></video>
														<view class="delect-icon" @tap="item.videoList = ''">
															<image class="full"
																src="https://img.aibbyp.com/wechat/images/nHome/close.png"
																mode="">
															</image>
														</view>
													</view>
													<view v-if="!item.videoList"
														@tap.stop="chooseVideoImage('video',key)" class="mb16 box-mode">
														<image class="full"
															src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png"
															mode=""></image>
													</view>
												</view>
												<view class="tar mt20">
													<u-button @click="upload(item)" size="medium" type="error"
														shape='circle'>确定上传</u-button>
												</view>
											</block>

										</view>
									</block>
									<block v-if="item.complete === 1">
										<view>
											<view class="f32 fb">已上传（不可更改）</view>

											<view class="info f24 mt12">
												现场图片
											</view>
											<view class="up-page mt20">
												<!--图片-->
												<view class="show-box" v-for="(data,index) in item.imageList"
													:key="index">
													<image class="full" :src="$wanlshop.oss(data)"
														@tap="previewImage(item.imageList,index)" mode="widthFix">
													</image>
												</view>
											</view>

											<view class="info f24" v-if="item.videoList">
												视频
											</view>
											<view class="up-page mt20">
												<!--视频-->
												<view class="show-box videoMp4"
													:class="{'videoMp4HM':userInfo.systemType == '鸿蒙'}"
													v-if="item.videoList">
													<video class="full" :src="$wanlshop.oss(item.videoList)"></video>
												</view>
											</view>
										</view>

									</block>
								</block>
								<!-- 收中期款 -->
								<block v-if="item.status == 4">
									<block v-if="item.complete === 0">
										<view class="mt12">
											等待中期款入账
										</view>
									</block>
									<block v-if="item.complete === 1">
										<view class="fb mt12">
											已收入中期款 <text class="cf64">￥{{item.content}}</text> ，可在钱包中查看
										</view>
									</block>
								</block>
								<!-- 上传现场凭证 -->
								<block v-if="item.status == 5">
									<block v-if="item.complete === 0">
										<view>
											<view class="f24 mt12">
												请上传现场凭证，待验收后，可结款。上传后无法修改，请认真选择上传内容。
											</view>
											<view class="info f24 mt12">
												1、(请上传现场图片，最多6张)
											</view>
											<block v-if='list[3].complete == 1'>
												<view class="up-page mt20">
													<!--图片-->
													<view class="show-box" v-for="(data,index) in item.imageList"
														:key="index">
														<image class="full" :src="$wanlshop.oss(data)"
															@tap="previewImage(index)" mode="widthFix">
														</image>
														<view class="delect-icon" @click="delect(index)">
															<image class="full"
																src="https://img.aibbyp.com/wechat/images/nHome/close.png"
																mode="">
															</image>
														</view>
													</view>
													<view v-if="item.imageList.length !== 6"
														@tap.stop="chooseVideoImage('img',key)" class="mb16 box-mode">
														<image class="full"
															src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png"
															mode=""></image>
													</view>

												</view>

												<view class="info f24">
													2、(请上传现场视频)
												</view>
												<view class="up-page mt20">

													<!--视频-->
													<view class="show-box videoMp4"
														:class="{'videoMp4HM':userInfo.systemType == '鸿蒙'}"
														v-if="item.videoList">
														<video class="full"
															:src="$wanlshop.oss(item.videoList)"></video>
														<view class="delect-icon" @tap="item.videoList = ''">
															<image class="full"
																src="https://img.aibbyp.com/wechat/images/nHome/close.png"
																mode="">
															</image>
														</view>
													</view>
													<view v-if="!item.videoList"
														@tap.stop="chooseVideoImage('video',key)" class="mb16 box-mode">
														<image class="full"
															src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png"
															mode=""></image>
													</view>
												</view>
												<view class="tar mt20">
													<u-button @click="upload(item)" size="medium" type="error"
														shape='circle'>确定上传</u-button>
												</view>
											</block>

										</view>
									</block>
									<block v-if="item.complete === 1">
										<view>
											<view class="f32 fb">已上传（不可更改）</view>

											<view class="info f24 mt12">
												现场图片
											</view>
											<view class="up-page mt20">
												<!--图片-->
												<view class="show-box" v-for="(data,index) in item.imageList"
													:key="index">
													<image class="full" :src="$wanlshop.oss(data)"
														@tap="previewImage(item.imageList,index)" mode="widthFix">
													</image>
												</view>
											</view>

											<view class="info f24" v-if="item.videoList">
												视频
											</view>
											<view class="up-page mt20">
												<!--视频-->
												<view class="show-box videoMp4"
													:class="{'videoMp4HM':userInfo.systemType == '鸿蒙'}"
													v-if="item.videoList">
													<video class="full" :src="$wanlshop.oss(item.videoList)"></video>
												</view>
											</view>
										</view>

									</block>
								</block>
								<!-- 收尾期 -->
								<block v-if="item.status == 6">
									<block v-if="item.complete === 0">
										<view class="mt12">
											等待收尾期入账
										</view>
									</block>
									<block v-if="item.complete === 1">
										<view class="fb mt12">
											已收入尾期款 <text class="cf64">￥{{item.content}}</text> ，可在钱包中查看
										</view>
									</block>
								</block>

							</view>
						</template>
					</u-time-line-item>
				</u-time-line>

			</view>
		</view>

		<view class="signature" v-if="showSignature">
			<view style="width: 100vw ;height: 100vh;">
				<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
					:openSmooth="openSmooth"></l-signature>
			</view>
			<view class="btns">
				<button @click="onClick('return')">取消</button>
				<button @click="onClick('clear')">清空</button>
				<button @click="onClick('undo')">撤消</button>
				<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
				<button @click="onClick('save')">保存</button>
				<!-- uvue 不支持 openSmooth -->
			</view>
			<view class="arrowUp" @click="showSignature = false">
				<u-icon name="arrow-up" size="36"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				WorkerGoodsData: [],
				signaUrl: '',
				title: 'Hello',
				penColor: '#000',
				penSize: 5,
				openSmooth: true,
				showSignature: false,
				userInfo: uni.getStorageSync('wanlshop:user'),
				btnLoading: false,
				videoList: null,
				imageList: [],
				valueInput: '',
				multipart: null,
				uploadurl: null,
				listIndex: null,
				info: {
					avatar: '',
				},
				list: [],
				option: {},
				data: {},
				user: {},

			}
		},
		onLoad(option) {
			this.option = option
			this.getMultipart()
			this.getOrderProgress()
			this.orderDetail(option.id)
			this.getWorkerGoods()
			this.user = uni.getStorageSync('wanlshop:user')
		},
		methods: {
			getWorkerGoods() {
				this.$api.post({
					url: '/worker/task/getWorkerGoods',
					data: {
						order_id: this.option.id,
						// order_id: '44',
					},
					success: res => {
						this.WorkerGoodsData = res
					}
				})
			},
			ysjwk(data) {
				this.$api.post({
					url: '/worker/recruit/checkWork',
					data: {
						order_id: this.option.id
					},
					success: res => {
						if (res) {
							this.orderDetail(this.option.id)
							this.getOrderProgress()
							this.$wanlshop.msg('已验收')
						}
					}
				})
			},
			orderDetail(id) {
				this.$api.post({
					url: '/worker/task/orderDetail',
					data: {
						order_id: id
					},
				}).then(res => {
					this.data = res
				})
			},
			upload(item) {
				this.$api.post({
					url: '/worker/task/uploadCertificate',
					data: {
						order_id: this.option.id,
						status: item.status,
						content: {
							images: item.imageList,
							video: item.videoList,
						},
					},
					loadingTip: '加载中...',
					success: res => {

						this.getOrderProgress()
					}
				})
			},
			getOrderProgress() {
				this.$api.post({
					url: '/worker/task/getOrderProgress',
					data: {
						order_id: this.option.id
					},
					loadingTip: "加载中...",
					success: res => {
						res.forEach(a => {
							a.imageList = []
							a.videoList = ''
							if (a.content && (a.status == 3 || a.status == 5 || a.status == 102) && a
								.content
								.images) {
								console.log(a);
								a.imageList = a.content.images
							}
							if (a.content && (a.status == 3 || a.status == 5 || a.status == 102) && a
								.content
								.video) {
								a.videoList = a.content.video
							}
						})
						this.list = res
					}

				})

			},
			submit() {

				let data = {
					goods_images: this.imageList,
					goods_videos: [this.videoList],
					describe: this.valueInput,
				}
				console.log(data);
				this.$api.post({
					url: '/worker/order/addOrder',
					data: data,
					loadingTip: '发布中',
					success: res => {
						uni.showModal({
							title: '发布成功',
							content: '待师傅接单（在我的预约中可查看订单）',
						})
					}
				})

			},
			onClick(type) {
				let _this = this
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'return') {
					this.showSignature = false
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							// 生成图片的临时路径
							// H5 生成的是base64
							this.url = res.tempFilePath
							this.$api.upload({
								url: '/common/upload',
								filePath: res.tempFilePath,
								name: 'file',
								success: data => {
									if (data) {
										_this.signaUrl = data.url
										_this.uploadContract(data.url)

										_this.showSignature = false
									}
								}
							});
							return


						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			uploadContract(url) {
				this.$api.post({
					url: '/worker/task/uploadContract',
					data: {
						order_id: this.option.id,
						content: url
					},
					success: res => {
						this.getOrderProgress()
					}
				})
			},
			chakanhetong(item) {
				uni.showLoading({
					title: '加载中...'
				})
				uni.downloadFile({
					url: 'https://img.aibbyp.com/' + item.content,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								uni.hideLoading()
								console.log('打开文档成功');
							},
							fail: error => {
								uni.showToast({
									title: '加载失败',
									icon: 'none'
								})
							}
						});
					}
				});
			},
			//点击上传图片或视频
			chooseVideoImage(type, key) {
				this.listIndex = key
				if (type == 'img') {
					this.chooseImages();
				} else {
					this.chooseVideo();
				}
			},
			//上传图片
			chooseImages() {
				uni.chooseImage({
					count: 6, //允许选择的数量
					success: res => {
						console.log(res);
						for (let i in res.tempFilePaths) {
							this.myUpload(res.tempFilePaths[i], 'image')
						}
						// this.imageList = this.imageList.concat(res.tempFilePaths);
						//console.log(this.imageList)


					}
				})
			},
			//上传视频
			chooseVideo(index) {
				uni.chooseVideo({
					maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: 1,
					success: res => {
						this.myUpload(res.tempFilePath, 'video')
						return

					}
				})
			},
			//预览图片
			previewImage: function(data, e) {
				let urls = data.map(a => this.$wanlshop.oss(a))
				uni.previewImage({
					current: e,
					urls: urls
				});
			},
			// 获取上传限制
			getMultipart() {
				this.$api.get({
					url: '/wanlshop/common/uploadData',
				}).then(res => {
					this.multipart = res.storage == 'local' ? null : res.multipart
					this.uploadurl = res.uploadurl
				})
			},
			// 上传到线上
			myUpload(filePath, type) {
				uni.showLoading({
					title: '上传中...'
				})
				this.$api.upload({
					url: this.uploadurl,
					filePath: filePath,
					name: 'file',
					formData: this.multipart,
				}).then(res => {
					console.log('成功', res);
					uni.hideLoading()
					// 视频图片
					if (type == 'video') {
						this.list[this.listIndex].videoList = res.url
						this.list[this.listIndex].imageList.type = 'video'
						return
					}
					if (type == 'image') {
						if (this.list[this.listIndex].imageList.length == 6) return
						this.list[this.listIndex].imageList.push(res.url)
						this.list[this.listIndex].imageList.type = 'image'
						return
					}
					// this.videoList = this.videoList.concat(res.tempFilePath);

				}).catch(res => {
					uni.hideLoading()
				})
			},
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.list[this.listIndex].imageList.splice(index, 1);
						}

					}
				});
			},





		},
	}
</script>

<style lang="scss" scoped>
	.dingdanjindu .center .up-page .videoMp4 {
		width: 100%;
		height: 400rpx;
	}

	.btns {
		position: sticky;
		bottom: 0;
		left: 0;
		z-index: 2;
		background: #fff;
	}

	.imgqm {
		width: 96rpx;
		height: 166rpx;
		border: 1rpx dashed #999999;
		transform: rotate(-90deg);
		margin-left: 60rpx;
	}

	.signature {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
		background: #fff;

		.btns {
			width: 700rpx;
			height: 96rpx;
			left: -280rpx;
			bottom: 340rpx;
			display: flex;
			transform: rotate(90deg);
			position: absolute;
			z-index: 4;
		}
	}

	.dingdanjindu {
		padding: 20rpx 0rpx;

		.full {
			width: 100%;
			height: 100%;
		}

		.up-page {
			display: flex;
			flex-wrap: wrap;
			display: flex;
			width: 100%;

			.show-box:nth-child(3n) {
				margin-right: 0;
			}

			.box-mode {
				width: 160rpx;
				height: 160rpx;

				border-radius: 8rpx;
				overflow: hidden;
			}

			.show-box {
				position: relative;
				margin-bottom: 16rpx;
				margin-right: 16rpx;
				@extend .box-mode;

				.delect-icon {
					height: 40rpx;
					width: 40rpx;
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					z-index: 1;
				}
			}
		}

		.bac {
			padding: 20rpx 36rpx;
			border-radius: 20rpx;
			background: #fff;
		}

		.goodsimg {
			width: 104rpx;
			height: 104rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
</style>